<template>
  <div class="content">
    <div class="return-detail">
      <div class="crumbs">
        <nuxt-link to="/user-center/uc-return" class="item-a">{{$t('applyReturn.refundList')}}</nuxt-link>
        <span class="arrow">></span>
        <span class="item-span">{{$t('applyReturn.refundDetails')}}</span>
      </div>
      <div class="return-step">
        <div
          :class="['item', ((refundDetail.returnMoneySts < 4 && refundDetail.returnMoneySts != -1) || refundDetail.returnMoneySts == 5)?'active':'']"
        >
          <div class="number">●</div>
          <div class="text">{{$t('applyReturn.buyerSubmits')}}</div>
          <div class="time">{{refundDetail.applyTime}}</div>
        </div>
        <div
          :class="['item', (refundDetail.returnMoneySts == 2 || refundDetail.returnMoneySts == 3 || refundDetail.returnMoneySts == 5)?'active':'']"
        >
          <div class="number">●</div>
          <div class="text">{{$t('applyReturn.sellerProcessing')}}</div>
          <div
            class="time"
            v-if="refundDetail.returnMoneySts == 2 || refundDetail.returnMoneySts == 3 || refundDetail.returnMoneySts == 5"
          >{{refundDetail.handelTime}}</div>
        </div>
        <div
          :class="['item', (refundDetail.returnMoneySts == 3 || refundDetail.returnMoneySts == 5)?'active':'']"
          v-if="refundDetail.applyType == 2"
        >
          <div class="number">●</div>
          <div class="text">{{$t('applyReturn.buyerReturns')}}</div>
          <div
            class="time"
            v-if="refundDetail.returnMoneySts == 3 || refundDetail.returnMoneySts == 5"
          >{{refundDetail.shipTime}}</div>
        </div>
        <div :class="['item', (refundDetail.returnMoneySts == 5)?'active':'']">
          <div class="number">●</div>
          <div class="text">{{$t('applyReturn.refundCompleted')}}</div>
          <div class="time" v-if="refundDetail.returnMoneySts == 5">{{refundDetail.refundTime}}</div>
        </div>
      </div>
      <div :class="['return-order',this.$store.state.locale == 'en'?'en':'']">
        <table cellspacing="0" cellpadding="0" class="order-box">
          <tbody>
            <tr class="box-tit">
              <th>{{$t('applyReturn.productInformation')}}</th>
              <th width="130">{{$t('applyReturn.transactionTime')}}</th>
              <th width="127">{{$t('applyReturn.numberOfApplications')}}</th>
              <th width="160">{{$t('applyReturn.refundAmount')}}</th>
              <th width="127">{{$t('status')}}</th>
              <th width="127">{{$t('operation')}}</th>
            </tr>
            <tr class="box-space">
              <td colspan="6"></td>
            </tr>
            <tr class="box-hd">
              <td colspan="6">
                <div class="order-number">
                  {{$t('applyReturn.orderNumber')}}：
                  <span class="num">{{refundDetail.orderNumber}}</span>
                </div>
                <div class="return-number">
                  {{$t('applyReturn.refundNumber')}}：
                  <span class="num">{{refundSn}}</span>
                </div>
                <nuxt-link :to="'/shopIndex?sid='+refundDetail.shopId" class="shop">
                  <span class="shop-icon"></span>
                  {{refundDetail.shopName}}
                </nuxt-link>
              </td>
            </tr>
            <tr class="box-tr" v-for="(refundItem,index) in refundDetail.orderItems" :key="index">
              <td>
                <div class="goods-info">
                  <div class="img">
                    <img :src="refundItem.pic" />
                  </div>
                  <div class="name-sku">
                    <a class="name">{{refundItem.prodName}}</a>
                    <span class="sku">{{refundItem.skuName}}</span>
                  </div>
                </div>
              </td>
              <td :rowspan="refundDetail.orderItems.length" v-if="index==0">
                <div class="deal-time">{{refundDetail.orderPayTime}}</div>
              </td>
              <td :rowspan="refundDetail.orderItems.length" v-if="index==0">
                <div class="apply-number">{{refundDetail.goodsNum}}</div>
              </td>
              <td :rowspan="refundDetail.orderItems.length" v-if="index==0">
                <div class="price-box">
                  <div class="all-price">{{$t('applyReturn.total')}}：<i v-if="refundDetail.orderAmount">￥{{Number(refundDetail.orderAmount).toFixed(2)}}</i><i v-if="refundDetail.orderAmount && refundDetail.refundScore">&nbsp;+&nbsp;</i><i v-if="refundDetail.refundScore">{{refundDetail.refundScore}}{{$t('applyReturn.points')}}</i></div>
                  <div class="return-price">{{$t('applyReturn.refunds')}}：<i v-if="refundDetail.refundAmount">￥{{Number(refundDetail.refundAmount).toFixed(2)}}</i><i v-if="refundDetail.refundAmount && refundDetail.refundScore">&nbsp;+&nbsp;</i><i v-if="refundDetail.refundScore">{{refundDetail.refundScore}}{{$t('applyReturn.points')}}</i></div>
                </div>
              </td>
              <td :rowspan="refundDetail.orderItems.length" v-if="index==0">
                <div class="status-box">
                  <div class="type">{{['',$t('applyReturn.refundsOnly'),$t('applyReturn.returnsAndRefunds')][refundDetail.applyType]}}</div>
                  <div
                    class="status"
                  >{{['',$t('applyReturn.buyerApplication'),$t('applyReturn.sellerAcceptance'),$t('applyReturn.buyerShipping'),$t('applyReturn.sellerReceipt'),$t('applyReturn.successfulRefund'),$t('applyReturn.buyerWithdrawsApplication'),$t('applyReturn.merchantRefusal')][refundDetail.returnMoneySts]}}</div>
                  <div class="status" v-if="refundDetail.returnMoneySts == -1">{{$t('applyReturn.refundClose')}}</div>
                </div>
              </td>
              <td :rowspan="refundDetail.orderItems.length" v-if="index==0">
                <div>
                  <!-- (买家申请 || 卖家接受 || 商家拒绝) || isCancel可撤销 -->
                  <a
                    href="JavaScript:void(0)"
                    class="action-a"
                    @click="cancelApply"
                    v-if="(refundDetail.returnMoneySts == 1 || refundDetail.returnMoneySts == 2 || refundDetail.returnMoneySts == 7) && refundDetail.isCancel"
                  >{{$t('applyReturn.applicationTips5')}}</a>
                  <a href="JavaScript:void(0)" v-else class="action-a cannotuse">{{$t('applyReturn.applicationTips5')}}</a>
                </div>
                <a
                  href="JavaScript:void(0)"
                  v-if="refundDetail.returnMoneySts == 2 && refundDetail.applyType == 2"
                  class="action-a"
                  @click="writeLogisticsMsg"
                >{{$t('applyReturn.fillLogistics')}}</a>
                <a
                  href="JavaScript:void(0)"
                  v-if="refundDetail.returnMoneySts == 3 && refundDetail.applyType == 2"
                  class="action-a"
                  @click="writeLogisticsMsg"
                >{{$t('applyReturn.modifyLogistics')}}</a>
                <!-- <a
                  href="JavaScript:void(0)"
                  v-if="refundDetail.returnMoneySts == 2 && refundDetail.applyType == 2 && refundDetail.isCancel"
                  class="action-b"
                  @click="cancelApply"
                >撤销申请</a> -->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="return-progress">
        <div class="tit">{{$t('applyReturn.refundProgress')}}</div>
        <!-- 申请关闭 -->
        <div class="item" v-if="refundDetail.returnMoneySts == -1">
          <div class="time">{{refundDetail.updateTime}}</div>
          <div class="text-box">
            <!-- <div class="name">{{nickName}}</div> -->
            <div class="name">{{$t('applyReturn.applicationClosed')}}</div>
          </div>
        </div>
        <!-- 买家撤销 -->
        <div
          class="item"
          v-if="(refundDetail.returnMoneySts == 6 || refundDetail.returnMoneySts == -1) && refundDetail.cancelTime"
        >
          <div class="time">{{refundDetail.cancelTime}}</div>
          <div class="text-box">
            <div class="name">{{nickName}}</div>
            <div class="text">{{$t('applyReturn.refundReason14')}}</div>
          </div>
        </div>
        <!-- 商家拒绝 -->
        <div
          class="item"
          v-if="(refundDetail.returnMoneySts == 7 || refundDetail.returnMoneySts == -1) && refundDetail.rejectTime || refundDetail.rejectMessage"
        >
          <div class="time">{{refundDetail.rejectTime}}</div>
          <div class="text-box">
            <div class="name">{{refundDetail.shopName}}</div>
            <div class="text">
              <p>{{$t('applyReturn.refundReason15')}}</p>
              <p v-if="refundDetail.rejectMessage">{{$t('applyReturn.reasonsRejection')}}："{{refundDetail.rejectMessage}}"</p>
              <p v-if="refundDetail.sellerMsg">{{$t('applyReturn.sellerRemarks')}}："{{refundDetail.sellerMsg}}"</p>
              <p>{{$t('applyReturn.refundReason16')}}</p>
            </div>
          </div>
        </div>
        <!-- 退款成功 -->
        <div class="item" v-if="refundDetail.returnMoneySts == 5 && refundDetail.refundTime">
          <div class="time">{{refundDetail.refundTime}}</div>
          <div class="text-box">
            <div class="name">{{refundDetail.shopName}}</div>
            <div class="text">{{$t('applyReturn.refundReason17')}}</div>
            <p v-if="refundDetail.sellerMsg">{{$t('applyReturn.sellerRemarks')}}："{{refundDetail.sellerMsg}}"</p>
          </div>
        </div>
        <!-- 卖家收到寄回货物 -->
        <div
          class="item"
          v-if="((refundDetail.returnMoneySts == 4 || refundDetail.returnMoneySts == 5) && refundDetail.applyType == 2) && refundDetail.receiveTime"
        >
          <div class="time">{{refundDetail.receiveTime}}</div>
          <div class="text-box">
            <div class="name">{{refundDetail.shopName}}</div>
            <div class="text">{{$t('applyReturn.refundReason18')}}</div>
            <p v-if="refundDetail.sellerMsg">{{$t('applyReturn.sellerRemarks')}}："{{refundDetail.sellerMsg}}"</p>
          </div>
        </div>
        <!-- 买家寄出 -->
        <div
          class="item"
          v-if="((refundDetail.returnMoneySts > 2 && refundDetail.returnMoneySts < 6) && refundDetail.applyType == 2) && refundDetail.shipTime"
        >
          <div class="time">{{refundDetail.shipTime}}</div>
          <div class="text-box">
            <div class="name">{{nickName}}</div>
            <div class="text">
              {{$t('applyReturn.refundReason19')}}
              <span class="distance">{{$t('applyReturn.logisticsCompany')}}：{{refundDelivery.deyName}}</span>
              <span class="distance">{{$t('applyReturn.shipmentNumber')}}：{{refundDelivery.deyNu}}</span>
            </div>
          </div>
        </div>
        <!-- 卖家同意，给出地址 -->
        <div
          class="item"
          v-if="((refundDetail.returnMoneySts > 1 && refundDetail.returnMoneySts < 6) && refundDetail.applyType == 2) && refundDetail.handelTime"
        >
          <!-- (refundDetail.returnMoneySts == 2 && refundDetail.applyType == 2) &&  -->
          <div class="time">{{refundDetail.handelTime}}</div>
          <div class="text-box">
            <div class="name">{{refundDetail.shopName}}</div>
            <div class="text">
              <p>{{$t('applyReturn.refundReason20')}}</p>
              <p>{{$t('applyReturn.refundAddress')}}：{{ refundDelivery.receiverName}}&nbsp;&nbsp;{{refundDelivery.receiverMobile}}&nbsp;&nbsp;{{refundDelivery.receiverAddr}}</p>
              <p v-if="refundDetail.sellerMsg">{{$t('applyReturn.sellerRemarks')}}："{{refundDetail.sellerMsg}}"</p>
            </div>
          </div>
        </div>
        <!-- 卖家同意 -->
        <div
          class="item"
          v-if="((refundDetail.returnMoneySts > 1 && refundDetail.returnMoneySts < 6) && refundDetail.applyType == 1) && refundDetail.decisionTime"
        >
          <div class="time">{{refundDetail.decisionTime}}</div>
          <div class="text-box">
            <div class="name">{{refundDetail.shopName}}</div>
            <div class="text">
              <p>{{$t('applyReturn.refundReason20')}}</p>
              <p v-if="refundDetail.sellerMsg">{{$t('applyReturn.sellerRemarks')}}："{{refundDetail.sellerMsg}}"</p>
            </div>
          </div>
        </div>
        <!-- 买家申请 -->
        <div class="item">
          <div class="time">{{refundDetail.applyTime}}</div>
          <div class="text-box">
            <div class="name">{{nickName}}</div>
            <div class="text">
              <p>
                <span class="distance ft">{{$t('applyReturn.buyerRequestRefund')}}</span>
                <span class="distance">{{$t('applyReturn.refundType')}}：{{['',$t('applyReturn.refundsOnly'),$t('applyReturn.returnsAndRefunds')][refundDetail.applyType]}}</span>
                <span class="distance">{{$t('applyReturn.refundAmount')}}：<i v-if="refundDetail.refundAmount">￥{{Number(refundDetail.refundAmount).toFixed(2)}}</i><i v-if="refundDetail.refundAmount && refundDetail.refundScore">&nbsp;+&nbsp;</i><i v-if="refundDetail.refundScore">{{refundDetail.refundScore}}{{$t('applyReturn.points')}}</i></span>
                <span class="distance">{{$t('applyReturn.refundReason')}}：{{refundReasonArray[refundDetail.buyerReason]}}</span>
              </p>
              <p v-if="refundDetail.buyerDesc">{{$t('applyReturn.refundDescription')}}："{{refundDetail.buyerDesc}}"</p>
              <p class="ref-voucher" v-if="refundDetail.photoFiles">{{$t('applyReturn.refundVoucher')}}：
                <img class="ref-img" v-for="pic in refundDetail.photoFiles.split(',')" :key="pic" :src="pic">
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 物流信息弹框 -->
    <writeLogisticsInfo
      v-if="showAdd"
      @toggleAddrPop="refreshChange"
      :refundSn="refundSn"
      :orderNumber="refundDetail.orderNumber"
      :refundDelivery="refundDetail.refundDelivery"
      :returnMoneySts="refundDetail.returnMoneySts"
    ></writeLogisticsInfo>
    <!-- /物流信息弹框 -->
  </div>
</template>

<script>
import writeLogisticsInfo from '~/components/write-logistics-info'
export default {
  components: {
    writeLogisticsInfo
  },
  data () {
    return {
      // refundReasonArray: ['拍错/多拍/不喜欢', '协商一致退款', '商品破损/少件', '商品与描述不符', '卖家发错货', '质量问题', '其他','','拼团失败'],
      refundSn: this.$route.query.refundSn,  //退款编号
      refundDetail: {},  //退款订单详情对象
      orderItems: [],  //订单项
      refundDelivery: {}, //收货地址对象
      nickName: '',  //用户名
      showAdd: false,  //物流信息弹框显隐
    }
  },
  mounted () {
    let nickName = window.localStorage.getItem('nickName')
    this.nickName = nickName
    this.getRefundDetail() //获取退款订单详情
  },
  computed: {
    // 退款原因（总）
    refundReasonArray: function(){
      return [this.$i18n.t('applyReturn.refundReason1'), this.$i18n.t('applyReturn.refundReason2'), this.$i18n.t('applyReturn.refundReason3'), this.$i18n.t('applyReturn.refundReason4'), this.$i18n.t('applyReturn.refundReason5'), this.$i18n.t('applyReturn.refundReason6'), this.$i18n.t('applyReturn.refundReason7'), '', this.$i18n.t('applyReturn.refundReason8')]
    }
  },
  methods: {
    /**
     * 获取退款订单详情
     */
    getRefundDetail () {
      this.$axios.get('/p/orderRefund/info?refundSn=' + this.refundSn)
        .then(({ data }) => {
          this.refundDetail = data
          this.orderItems = data.orderItems[0]
          this.refundDelivery = data.refundDelivery
        })
    },
    /**
     * 撤销申请
     */
    cancelApply () {
      // 买家申请 || 卖家接受 || 卖家拒绝
      if (this.refundDetail.returnMoneySts == 1 || this.refundDetail.returnMoneySts == 7 || this.refundDetail.returnMoneySts == 2) {
        this.$confirm(this.$i18n.t('applyReturn.refundReason11'), this.$i18n.t('applyReturn.tips'), {
          confirmButtonText: this.$i18n.t('determine'),
          cancelButtonText: this.$i18n.t('cancel'),
          type: 'warning'
        }).then(() => {
          this.$axios.put('/p/orderRefund/cancel', this.refundSn)
            .then(({ data }) => {
              this.$message({
                message: this.$i18n.t('applyReturn.refundReason12'),
                duration: 1000,
                type: 'success'
              });
              // this.$router.push({ path: '/user-center/uc-return' })
              this.getRefundDetail()
            })
        }).catch(() => { });
      }
    },

    /**
     * 填写 || 修改物流信息
     */
    writeLogisticsMsg () {
      this.showAdd = true
    },
    /**
    * 刷新回调
    */
    refreshChange (visible) {
      this.showAdd = visible
    },

  },
}
</script>
<style scoped src='~/assets/css/return-detail.css'></style>